setInterval(()=>{
  document.querySelector('.time').innerHTML=new Date().toLocaleString()
},1000)

async function getData(){
let res = await axios.get('http://8.138.119.204:8182/api/trend?type=map')
const sale=document.querySelector('.sales-trend .chart')
let myChart = echarts.init(sale,'dark')
  let data=res.data.data
  option = {
    backgroundColor: '#33475b', // 图表背景颜色
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        label: {
          backgroundColor: '#2a3b4c'
        }
      }
    },
    legend: {
      data: data.series.map(item=>item.name)
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {  // 不显示刻度线
          show: false
      },
        data: data.xAxis.map(item=>item)
      }
    ],
    yAxis: [
      {
            splitLine: {
              show:false
          },
          axisTick: {  // 不显示刻度线
            show: false
        },
        type: 'value'
      }
    ],
    series: [
      {
        name: data.series[0].name,
        type: 'line',
        areaStyle: {},
        data:data.series[0].data.map(item=>item)
      },
      {
        name:data.series[1].name,
        type: 'line',
        areaStyle: {},
        data: data.series[1].data.map(item=>item)
      },
      {
        name:data.series[2].name,
        type: 'line',
        areaStyle: {},
        data:data.series[2].data.map(item=>item)
      },
      {
        name: data.series[3].name,
        type: 'line',
        areaStyle: {},
        data: data.series[3].data.map(item=>item)
      },
      {
        name: data.series[4].name,
        type: 'line',
        areaStyle: {},
        data: data.series[4].data.map(item=>item)
      }
    ]
  };
  
  myChart.setOption(option);
}
setInterval(getData,2000)

async function saleData(){
let res = await axios.get('http://8.138.119.204:8182/api/seller')
let datas=res.data.data
var chartDom = document.querySelector('.sales-trend .sale')
var myChart = echarts.init(chartDom,'dark');

// 对数据进行排序（从大到小）
datas.sort(function (a, b) {
  return b.value - a.value
})
option = {
  backgroundColor: '#33475b', // 图表背景颜色
  xAxis: {
    // max: 'dataMax',
    splitLine: { // 不显示网格线
      show:false
  },
  axisTick: {  // 不显示刻度线
    show: false
}
  },
  grid: {
    top: '1%',
    left: '2%',
    right: '10%',
    bottom: '2%',
    containLabel: true
  },
  yAxis: {
    axisTick: {  // 不显示刻度线
      show: false
  },
    type: 'category',
    inverse: false,
    data:datas.map(item=>item.name),
    max: 4,
  },
  series: [
    {
      realtimeSort: true,
      type: 'bar',
      color: '#86a3a8',
      data: datas.map(item=>item.value),
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
};
myChart.setOption(option)

}
saleData()
async function map() {
  let res = await axios.get('http://8.138.119.204:8182/api/points')
  console.log(res.data.data)
  let datas = res.data.data.map(item => ({
    name: item.name,
    value: [item.value[0], item.value[1], item.level]
  }));
  
  const dom = document.querySelector('.top')
  const myEchart = echarts.init(dom, 'dark')
  
  const option = {
    backgroundColor: '#33475b', // 图表背景颜色
    visualMap: {
      bottom: '4%',
      type: 'piecewise',//区间
      show: true,
      left: 10,
      splitList: [
        { gte: 1, lt: 2, color: '#98FB98', label: '白银客户' },
        { gte: 2, lt: 3, color: '#FFFF00', label: '黄金客户' },
        { gte: 3, lt: 4, color: '#ff7077', label: '钻石客户' },
        { gte: 4, lt: 5, color: '#fdac94', label: '白银客户-预警' },
        { gte: 5, lt: 6, color: '#eedd78', label: '黄金客户-预警' },
        { gte: 6, lt: 10, color: '#FF0000', label: '钻石客户-预警' },
      ],
      inRange: {
        symbol: 'circle', //圆点
        symbolSize: 12
      }
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.2,
      label: {
        normal: {
          show: false,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#759aa0',
        },
        emphasis: {
          areaColor: '#ffb248',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        data: datas,
        symbolSize: function (val) {
          return val[2] / 1; // 根据值调整点的大小
        },
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            show: false
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: { // 设置点的样式
          normal: {
            color: 'rgba(252, 30, 30, 0.8)'
          }
        }
      }
    ],
  }
  myEchart.setOption(option)
}
map()

async function renderSalesMoneyData() {
  let res = await axios.get('http://8.138.119.204:8182/api/rank')
  let resdata = res.data
  const box = document.querySelector('.bottom') 

  const myecharts = echarts.init(box, 'dark')

  let index = 12
  const datalist = resdata.data.slice(0,index).map(item=>item.value) //[120, 200, 150, 80, 70, 110, 130]
  const xtitles = resdata.data.slice(0,index).map(item=>item.name)
  const  option = {
      backgroundColor: '#33475b',
     title:{
           text: '销售金额(万)',
           textStyle:{
               color:'#fff',
               fontSize:10
           }
     },
      grid:{
          top:'13%',
          bottom:'10%',
          right:'5%'
      },
      xAxis: {
          type: 'category',
          axisTick: {  // 不显示刻度线
            show: false
        },
          data:xtitles //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value',
          splitLine: { // 不显示网格线
            show:false
        },
        axisTick: {  // 不显示刻度线
          show: false
      }
      },
      series: [{
          // data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          data:datalist.map((item,index)=>{
              return  {
                  value:item,
                  itemStyle:{
                      color:index<datalist.length-2?'#9fde9a':'#80a9b0'
                  }
              }
          })
      }],
   
  };
  
  setInterval(function (){
      // var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
  
      // // var data0 = option.series[0].data;
      // var data0 = datalist;
      
      
      // // data0.pop();
      // data0.push(Math.round(Math.random() * 1000));
      index++
      if(index>=resdata.data.length){
          index = 0
      }

      const itemdata = resdata.data[index]
      datalist.shift();
      xtitles.shift();

      datalist.push(itemdata.value)
      xtitles.push(itemdata.name)
  
      // option.xAxis.data.shift();
      // option.xAxis.data.push(axisData);
      option.xAxis.data = xtitles
      option.series[0]={
          // data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          data:datalist.map((item,index)=>{
              return  {
                  value:item,
                  itemStyle:{
                      color:index<datalist.length-2?'#9fde9a':'#eedd78'
                  }
              }
          })
      }
  
      myecharts.setOption(option);
  }, 2100);


  myecharts.setOption(option)
}
renderSalesMoneyData()

async function getSalesPercent() {
  let res = await axios.get('http://8.138.119.204:8182/api/commodity')
  let datas=res.data.data
  const percent = document.querySelector('.sales-trend .percent')
  const myEchart = echarts.init(percent,'dark')
  option = {
    backgroundColor: '#33475b',
    title: [
        {
            text: '女装',
            left: '13%',
            bottom: '15%',
            textStyle: {
                color: 'white',
                fontSize: 12
            }
        },
        {
            text: '手机数码',
            left: 'center',
            bottom: '15%',
            textStyle: {
                color: 'white',
                fontSize: 12
            }
        },
        {
            text: '美妆护肤',
            right: '10%',
            bottom: '15%',
            textStyle: {
                color: 'white',
                fontSize: 12
            }
        }
    ],
    tooltip: {
        trigger: 'item',
    },
    series: [
      { 
          width: '30%',
          type: 'pie',
          center: ['20%', '50%'],
          radius: '45%',
          label: {
              textStyle: {
                  fontSize: 10 // 这里设置文字大小，可以根据需求调整
              }
          },
          data: datas[0].children.map(ele => {
              return { value: ele.value, name: ele.name }
          }),
         
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
      },
      {
          width: '30%',
          type: 'pie',
          center: ['50%', '50%'],
          radius: '45%',
          label: {
              textStyle: {
                  fontSize: 10 // 这里设置文字大小，可以根据需求调整
              }
          },
          data: datas[1].children.map(ele => {
              return { value: ele.value, name: ele.name }
          }),
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
      },
      {
         
          width: '30%',
          type: 'pie',
          center: ['80%', '50%'],
          radius: '45%',
          label: {
              textStyle: {
                  fontSize: 10 // 这里设置文字大小，可以根据需求调整
              }
          },
          data: datas[2].children.map(ele => {
              return { value: ele.value, name: ele.name }
          }),
          emphasis: {
              itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
      }
  ]
}
  myEchart.setOption(option)
}
getSalesPercent()

async function getSalesPercent2() {
  let res = await axios.get('http://8.138.119.204:8182/api/stock')
  let datas=res.data.data
  const percent = document.querySelector('.sales-trend .ivan')
  const  myChart= echarts.init(percent,'dark')
  var option;
  option = {
    backgroundColor: '#33475b',
    series: [
      {
        radius: '45%',
        center: ['20%', '30%'],
        title: {
            fontSize: '10',
            color: 'white',
            offsetCenter: ["0", "-30%"]
        },
        type: 'gauge',
        min: '0',
        max: datas[0].stock,
        axisLine: {
            lineStyle: {
                width: 5,
                color: [
                    [0.2, '#91CA8C'],
                    [0.8, '#37a2da'],
                    [1, '#fd666d']
                ]
            }
        },
        // pointer: {
            // itemStyle: { // 指针 
            //     color: ''
            // }
        // },
        axisTick: { // 刻度
            distance: -2,
            length: 5,
            lineStyle: {
                color: '#759AA0',
                width: 2
            }
        },
        splitLine: { // 分隔线
            distance: -2,
            length: 10,
            lineStyle: {
                color: '#759AA0',
                width: 4
            }
        },

        axisLabel: { // 刻度标签
            color: 'auto', 
            distance: 5,
            fontSize: 5,

        },
        detail: { // 文字详情
            valueAnimation: true,
            formatter: '{value}',
            fontSize: 10,
            color:'auto'
        },
        data: [
            {
                name: datas[0].name,
                value: datas[0].sales,

            }
            
          ]
      },
      {
        radius:'45%',
        center:['50%','30%'],
        min: 0,
        max: datas[1].stock,
        title:{
          fontSize: '10',
          color: 'white',
          offsetCenter: ["0", "-30%"]
         },
         type: 'gauge',
         axisLine: {
           lineStyle: {
             width: 5,
             color: [
               [0.2, '#91CA8C'],
               [0.8, '#37a2da'],
               [1, '#fd666d']
             ]
           }
         },
         pointer: {
           itemStyle: {
             color: 'auto'
           }
         },
         axisTick: {
           distance: -2,
           length: 5,
           lineStyle: {
             color: '#759AA0',
             width: 2
           }
         },
         splitLine: {
           distance: -2,
           length: 10,
           lineStyle: {
             color: '#759AA0',
             width: 4
           }
         },
       
         axisLabel: { // 刻度标签
           color: 'auto',
           distance: 5,
           fontSize: 5,
           
         },
         detail: {
           valueAnimation: true,
           formatter: '{value}',
           fontSize:10,
           color: 'auto'
         },
         data: [
           {
             name:datas[1].name,
             value:datas[1].sales
           }
         ]
      },
      {
        radius:'45%',
        center:['80%','30%'],
        title:{
          fontSize: '10',
          color: 'white',
          offsetCenter: ["0", "-30%"]
         },
         min: 0,
         max: datas[2].stock,
         type: 'gauge',
         axisLine: {
           lineStyle: {
             width: 5,
             color: [
               [0.2, '#91CA8C'],
               [0.8, '#37a2da'],
               [1, '#fd666d']
             ]
           }
         },
         pointer: {
           itemStyle: {
             color: 'auto'
           }
         },
         axisTick: {  // 刻度
           distance: -2,
           length: 5,
           lineStyle: {
             color: '#759AA0',
             width: 2
           }
         },
         splitLine: { // 分隔线
           distance: -2,
           length: 10,
           lineStyle: {
             color: '#759AA0',
             width: 4
           }
         },
       
         axisLabel: { // 刻度标签
           color: 'auto',
           distance: 5,
           fontSize: 5,
           
         },
         detail: {
           valueAnimation: true,
           formatter: '{value}',
           fontSize:10,
           color: 'auto'
         },
         data: [
           {
             name:datas[2].name,
             value:datas[2].sales
           }
         ]
      },
       {
        radius:'45%',
        center:['35%','75%'],
        title:{
          fontSize: '10',
          color: 'white',
          offsetCenter: ["0", "-30%"]
         },
         min: 0,
         max: datas[3].stock,
         type: 'gauge',
         axisLine: {
           lineStyle: {
             width: 5,
             color: [
               [0.2, '#91CA8C'],
               [0.8, '#37a2da'],
               [1, '#fd666d']
             ]
           }
         },
         pointer: {
           itemStyle: {
             color: 'auto'
           }
         },
         axisTick: {
           distance: -2,
           length: 5,
           lineStyle: {
             color: '#759AA0',//刻度颜色
             width: 2
           }
         },
         splitLine: {
           distance: -2,
           length: 10,
           lineStyle: {
             color: '#759AA0',//刻度线颜色
             width: 4
           }
         },
       
         axisLabel: {
           color: 'auto',
           distance: 5, // 刻度标签与刻度线之间的距离
           fontSize: 5,
           
         },
         detail: {
           valueAnimation: true,
           formatter: '{value}',
           fontSize:10,
           color: 'auto' // 文字颜色
         },
         data: [
           {
             name:datas[3].name,
             value:datas[3].sales
           }
         ]
      },
      {
        radius:'45%',
         center:['65%','75%'],
         title:{
          fontSize: '10',
          color: 'white',
          offsetCenter: ["0", "-30%"]
         },
         min: 0,
         max: datas[4].stock,
         type: 'gauge',
         axisLine: {
           lineStyle: {
             width: 5,
             color: [
               [0.2, '#91CA8C'],
               [0.8, '#37a2da'],
               [1, '#fd666d']
             ]
           }
         },
        //  pointer: {
        //    itemStyle: {
        //      color: 'auto'
        //    }
        //  },
         axisTick: {
           distance: -2,
           length: 5,
           lineStyle: {
             color: '#759AA0',
             width: 2
           }
         },
         splitLine: {
           distance: -2,
           length: 10,
           lineStyle: {
             color: '#759AA0',
             width: 4
           }
         },
       
         axisLabel: {
           color: 'auto',
           distance: 5,
           fontSize: 5,
           
         },
         detail: {
           valueAnimation: true,
           formatter: '{value}',
           fontSize:10,
           color: 'auto'
         },
         data: [
           {
             name:datas[4].name,
             value:datas[4].sales
           }
         ]
      }
    ]
  };
  myChart.setOption(option);
}
getSalesPercent2()